<template>
  <setting-outlined
    v-bind="$attrs"
    class="ant-pro-dropdown ant-pro-dropdown-action"
    @click="handleSettingBtnClick"
  />
  <a-modal
    v-model:open="state.visible"
    :width="700"
    :title="t('global.setting.title')"
    :confirm-loading="state.confirmLoading"
    @ok="handleOk"
  >
    <a-row :gutter="16">
      <a-col :span="12">
        <list label="Basic Layout">
          <list-item label="Layout Mode">
            <a-select :value="layout" style="width: 150px" @change="handleLayoutChange">
              <a-select-option value="side">Side</a-select-option>
              <a-select-option value="left">Left</a-select-option>
              <a-select-option value="top">Top</a-select-option>
              <a-select-option value="mix">Mix</a-select-option>
            </a-select>
          </list-item>
          <list-item label="Content Width">
            <a-radio-group
              :value="contentWidth"
              style="width: 150px"
              @change="handleContentWidthChange"
            >
              <a-radio-button value="Fluid">Fluid</a-radio-button>
              <a-radio-button value="Fixed">Fixed</a-radio-button>
            </a-radio-group>
          </list-item>
          <list-item label="Nav Theme">
            <a-radio-group
              :disabled="hasMix"
              :value="navTheme"
              style="width: 150px"
              @change="handleNavThemeChange"
            >
              <a-radio-button value="dark">Dark</a-radio-button>
              <a-radio-button value="light">Light</a-radio-button>
            </a-radio-group>
          </list-item>
          <list-item label="Split Menu">
            <a-switch
              checked-children="开"
              un-checked-children="关"
              :disabled="layout !== 'mix'"
              :checked="splitMenus"
              @change="handleSplitMenusChange"
            />
          </list-item>
        </list>

        <list v-if="false" label="Box">
          <list-item label="Fixed Header">
            <a-switch :checked="fixedHeader" />
          </list-item>
          <list-item label="Fixed Sidebar">
            <a-switch :checked="fixedSidebar" />
          </list-item>
        </list>

        <list label="Router Animation">
          <a-select
            :value="transitionName || 'null'"
            style="width: 200px"
            @change="handleChangeTransitionName"
          >
            <a-select-option value="null">Null</a-select-option>
            <a-select-option value="slide-fadein-up">Slide Up</a-select-option>
            <a-select-option value="slide-fadein-right">Slide Right</a-select-option>
            <a-select-option value="fadein">Fade In</a-select-option>
            <a-select-option value="zoom-fadein">Zoom</a-select-option>
          </a-select>
        </list>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>

<script lang="ts" setup>
import { computed, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { SettingOutlined } from '@ant-design/icons-vue';

import List from './list.vue';
import ListItem from './list-item.vue';
import type { RadioChangeEvent, SelectProps, SwitchProps } from 'ant-design-vue';
import { useAppStore } from '@/store/app';
import type { ContentWidth, LayoutType, MenuTheme } from '../base-layouts/typing';
const { t } = useI18n();
const state = reactive({
  visible: false,
  confirmLoading: false,
});
const handleOk = () => {
  state.visible = false;
};
const handleSettingBtnClick = () => {
  state.visible = true;
};
const appStore = useAppStore();
const layout = computed(() => appStore.layout);
const navTheme = computed(() => appStore.navTheme);
const contentWidth = computed(() => appStore.contentWidth);
const splitMenus = computed(() => appStore.splitMenus);
const fixedHeader = computed(() => appStore.fixedHeader);
const fixedSidebar = computed(() => appStore.fixedSidebar);
const transitionName = computed(() => appStore.transitionName);

const hasMix = computed(() => layout.value === 'mix');

const handleLayoutChange: SelectProps['onChange'] = value => {
  if (value !== 'mix') {
    // 强制停止使用分割菜单
    appStore.SET_SPLIT_MENUS(false);
  } else {
    // 如果是 mix 模式，则需要将主题色设置为 dark
    appStore.SET_NAV_THEME('dark');
  }
  appStore.SET_LAYOUT(value as LayoutType);
};
const handleContentWidthChange = (e: RadioChangeEvent) => {
  const value = (e.target as HTMLInputElement).value as ContentWidth;
  appStore.SET_CONTENT_WIDTH(value);
};
const handleNavThemeChange = (e: RadioChangeEvent) => {
  const value = (e.target as HTMLInputElement).value as MenuTheme | 'realDark';
  appStore.SET_NAV_THEME(value);
};
const handleSplitMenusChange: SwitchProps['onChange'] = checked => {
  appStore.SET_SPLIT_MENUS(checked as boolean);
};
const handleChangeTransitionName: SelectProps['onChange'] = value => {
  appStore.SET_TRANSITION_NAME(value === 'null' ? '' : (value as string));
};
</script>
